<template>
	<view class="detail" v-if="item">
		<view class="header">
			<image class="pic" :src="item.image" mode="widthFix"></image>
			<view class="mask"
				:style="{backgroundImage:`linear-gradient(to bottom, transparent , ${item.imageHue.replace('0x','#')+'ee'} 50%) `}">
				<view class="title">{{item.title}}</view>
			</view>
		</view>
		<!-- 富文本 -->
		<rich-text class="body" :nodes="item.body | parseHtml"></rich-text>

		<!-- 合集 -->
		<view class="section" v-if="item.section" :style="{backgroundColor:item.imageHue.replace('0x','#') + 'ef'}"
			@click="gotoSection(item.section.id)">
			<image :src="item.section.thumbnail" class="pciture"></image>
			<view class="con">
				<view class="from">本文来自</view>
				<view class="name">
					{{item.section.name}}· 合集
				</view>
				<text class="icon-next">〈</text>
			</view>
		</view>
		<!-- 底部导航条 -->
		<view class="navbottom" v-if="list">
			<view class="back" @click="comeback">〈</view>
			<view class="icons" @click="gotocomment(item.id)">
				<image class="icon-bot" src="../../static/pinlun.jpg" mode=""></image>
				<text class="num">{{list.comments}}</text>
			</view>
			<view class="icons" @click="clickgood($event)">
				<image class="icon-bot" src="../../static/good.png" >
					<view :animation="animationData" class="num" @click="praiseMe">+1</view>
				</image>
				<!-- <image class="icon-bot" v-if="dbgoods" src="../../static/good2.png" /> -->
				
				<!-- <text class="num" @click="topcount($event,item)">{{list.popularity}}</text> -->
			</view>
			<view class="icons">
				<image @click="add($event,item,item.id)" class="icon-bot" src="../../static/shoucang.jpg">
					<view :animation="AanimationData" class="num" @click="apraiseMe">+1</view>
				</image>
			</view>
			<view class="icons">
				<image class="icon-bot" src="../../static/fenxiang.png" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item: null,
				list: null,
				// agood: true,
				// dbgoods: false,
				light:true,
				counttoken: null,
				animationData: {},
				animationDataArr: [{}, {}, {}, {}],
				AanimationData: {},
				AanimationDataArr: [{}, {}, {}, {}],
				// addsc: uni.getStorageSync('addsc') || [],
			}
		},
		onUnload() {

			this.animationData = {};
			this.animationDataArr = [{}, {}, {}, {}]
			this.AanimationData = {};
			this.AanimationDataArr = [{}, {}, {}, {}]

		},

		onLoad(option) {

			this.animation = uni.createAnimation();

			uni.request({
					url: "https://apis.netstart.cn/zhihudaily/story/" + option.id,
					success: (res) => {
						this.item = res.data.story
					}
				}),
				uni.request({
					url: "https://apis.netstart.cn/zhihudaily/story/" + option.id + "/extra",
					success: (res) => {
						this.list = res.data;
						console.log(this.list);

						// let counttoken = uni.getStorageSync('counttoken');
						// console.log(counttoken);
						// if (this.list.popularity++) {
						// 	this.list.popularity = counttoken
						// }
					// let counttoken = uni.getStorageSync('addsc')
					},
				})

		},
		methods: {
			add(e,item,id){
				console.log(e)
				console.log(item)
				console.log(id)
				// this.light = !this.light;
				const collect=uni.getStorageSync('addsc')||[];
				collect.unshift(id);
				var collectadd=[];
				var index=0;
				
				this.apraiseMe()
				for(var i=0;i<collect.length;i++ ){
					if(collectadd.indexOf(collect[i])==-1){
						collectadd[index]=collect[i];
						index++;
					}
				}
				console.log(collectadd)
				
				// var connect=[]
				// connect.push(JSON.parse(JSON.stringify(item)))
				// console.log(connect)
				
				uni.setStorageSync('addsc',collectadd);
				// uni.setStorageSync('addsc',connect);
				// this.addsc=[id,...this.addsc];
				// uni.setStorageSync('addsc',this.addsc);
				
				
			},
			
			apraiseMe(e) {
				// var gindex = e.currentTarget.dataset.gindex;
				this.animation.translateY(-60).opacity(1).step({
					duration: 400
				});
				this.AanimationData = this.animation.export();
				setTimeout(function() {
					this.animation.translateY(0).opacity(0).step({
						duration: 0
					});
					this.AanimationData = this.animation.export();
				}.bind(this), 500)
			},
			
			
			praiseMe(e) {
				// var gindex = e.currentTarget.dataset.gindex;
				this.animation.translateY(-60).opacity(1).step({
					duration: 400
				});
				this.animationData = this.animation.export();
				setTimeout(function() {
					this.animation.translateY(0).opacity(0).step({
						duration: 0
					});
					this.animationData = this.animation.export();
				}.bind(this), 500)
			},
			

			// topcount: function(e, item) {
			// 	let one = this.list.popularity++
			// 	console.log(one)
			// 	let two = JSON.stringify(this.list.popularity)
			// 	this.clickgood()
			// 	uni.setStorage({
			// 		key: 'counttoken',
			// 		data: two
			// 	})
			// },

			clickgood: function() {
				// this.agood = false
				// this.dbgoods = true
				this.praiseMe()
			},

			comeback: function() {
				uni.navigateBack({
				});
			},
			gotocomment: function(id) {
				uni.navigateTo({
					url: "../comment/comment?id=" + id
				})
			},
			gotoSection: function(id) {
				uni.navigateTo({
					url: "../Section/Section?id=" + id
				})
			}
		},
		filters: {
			parseHtml: function(str) {
				return str.replaceAll('<figure>', "<div>").replaceAll('</figure>', "</div>")
					.replaceAll('<figcaption>', "<div>").replaceAll('</figcaption>', "</div>")
			}
		}
	}
</script>

<style lang="less">
	.detail {
		padding-bottom: 150rpx;

		.header {
			position: relative;

			.pic {
				width: 100%;
				height: 750rpx;
			}

			.mask {
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: 9;
				width: 690rpx;
				height: 250rpx;
				padding: 30rpx;
				color: white;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;

				.title {
					font-size: 36rpx;
					font-weight: 600;
				}
			}

		}

		.section {
			display: flex;
			margin: 30rpx;
			align-items: center;
			border-radius: 20rpx;
			overflow: hidden;
			padding-right: 20rpx;

			.pciture {
				width: 150rpx;
				height: 150rpx;
				border-radius: 20rpx;
				transform-origin: left top;
				transform: rotate(15deg);
			}

			.con {
				flex: 1;
				color: white;
				margin-left: 20rpx;
				position: relative;

				.from {
					color: #CCCCCC;
					font-size: 20rpx;
					line-height: 2em;
				}

				.name {
					font-weight: bold;
					font-size: 1.1em;
				}

				.icon-next {
					position: absolute;
					right: 20rpx;
					top: 50%;
					transform: translateY(-50%);
					font-size: 50rpx;
					font-weight: 600;
					font-family: "宋体";
				}
			}

		}

		.navbottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #f6f6f6;
			width: 100%;
			height: 100rpx;
			padding: 0 30rpx;
			box-sizing: border-box;

			.back {
				font-size: 50rpx;
				font-family: '宋体';
				font-weight: 600;
				border-right: 2px solid #333333;
				padding-right: 30rpx;
			}

			.icons {
				position: relative;

				.icon-bot {
					width: 50rpx;
					height: 50rpx;
				}

				.num {
					position: absolute;
					top: 0;
					right: -25rpx;
					text-align: center;
					width: 25rpx;
					height: 25rpx;
					font-size: 30rpx;
				}
			}

		}
	}
</style>
